<template>
  <div class="groupBox">
    <!-- 小组页面 -->
    <div class="groupTitle">我的小组</div>
    <ul>
        <li class="groupList" v-for="(item,index) in groupList" :key="index">
            <div class="groupImg">
                <img :src="item.img" alt="">
            </div>
            <div class="groupCount">
                <p class="groupCtitle">
                    <span>{{item.title}}</span>
                    <button>退出小组</button>
                </p>
                <p class="groupCtext">{{item.text}}</p>
                <div class="groupLabel">
                    <p>旅游</p>
                    <p>咨询</p>
                    <p>穷游</p>
                </div>
            </div>
        </li>
    </ul>
  </div>
</template>

<script>
export default {
    data(){
        return {
            groupList:[
                {
                    title:'春天',
                    text:'又到了万物复苏的季节了,说一说你记忆中的春天吧~',
                    img:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607616004654&di=efd307247291f6cceaef15ec26a4632b&imgtype=0&src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fe9f9f233e8ed672985ed94a6a4a3dfd3b18fed7546440-zmyk2r_fw658'
                },
                {
                    title:'夏天',
                    text:'又到了热死人不要命的季节了,说一说你记忆中的夏天吧~',
                    img:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607616021892&di=a56d5078e8834b10d9144cf6fb43520f&imgtype=0&src=http%3A%2F%2Fimage.biaobaiju.com%2Fuploads%2F20181007%2F19%2F1538910194-INAflEDkOo.jpg'
                },
                {
                    title:'秋天',
                    text:'又到了大丰收的季节了,说一说你记忆中的秋天吧~',
                    img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2280123000,3637991186&fm=26&gp=0.jpg'
                },
                {
                    title:'冬天',
                    text:'又到了冻死人不偿命的季节了,说一说你记忆中的冬天吧~',
                    img:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607616095590&di=c7edc4da6c866f602a50bee346f7586b&imgtype=0&src=http%3A%2F%2Fs8.sinaimg.cn%2Fmw690%2F007iGwrYzy7pjPdZPJt97%26690'
                },
            ]
        }
    }
};
</script>

<style>
.groupBox {
  width: 900px;
  height: 780px;
  background: #fff;
}
.groupTitle {
  padding-left: 50px;
  width: 850px;
  height: 50px;
  text-align: left;
  border-bottom: 1px solid #ccc;
  line-height: 50px;
  color: #999;
}
.groupList{
    padding: 20px 0;
    height: 140px;
    margin: 0 20px;
    border-bottom: 1px solid #ccc;
}
.groupImg{
    width: 140px;
    height: 140px;
    background: #000;
    float: left;
}
.groupImg>img{
    width: 100%;
    height: 100%;
}
.groupCount{
    width: 710px;
    height: 140px;
    float: left;
    margin-left: 10px;
}
.groupCtitle{
    height: 40px;
    line-height: 40px;
    color: #09ade2;
    text-align: left;
    font-size: 20px;
}
.groupCtext{
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    color: #999;
    text-align: left;
    margin-bottom: 40px;
}
.groupCtitle>button{
    width: 90px;
    height: 35px;
    font-size: 16px;
    float: right;
    color: #999;
}
.groupLabel>p{
    width: 40px;
    height: 20px;
    background: rgb(154, 154, 154);
    border-radius: 10px;
    font-size: 12px;
    color: #fff;
    line-height: 20px;
    float: left;
    margin-right: 10px;
}
</style>